<template>
	<view class="play-back-detail-page">
		<view style="width: 100%;height: 185px;"><img style="width: 100%;height: 185px;" :src="img" alt=""></view>
		<view style="padding: 32rpx;">
			<view class="text-title" style="margin: 30rpx 0;">{{formData.title}}</view>
			<view style="margin: 20rpx 0;">
				<view>
					<img style="width: 20px;height: 20px;vertical-align: middle;" src="../../../static/icon-time.png" alt="">
					<uni-dateformat :threshold="[0, 0]" :date="formData.hostTime"></uni-dateformat></view>
				<view style="margin-top: 5px;">
					<img style="width: 20px;height: 20px;vertical-align: middle;" src="../../../static/icon-chakan.png" alt="">
					<text style="width: 90%;display: inline-block;vertical-align: middle;" class="text-title">{{formData.location}}</text>
				</view>
			</view>
			<view style="margin-top: 10px;">
				<view><text class="tab-sty" :class="type == 0 ? 'isClick': ''" @click="type = 0">图册</text><text class="tab-sty" :class="type == 1 ? 'isClick': ''" @click="type = 1">视频</text></view>
				<view style="margin-top: 20px;" v-if="type == 0">
					<view v-for="item in imgList" :key="item.n" class="img-area-sty" @click="previewImage(item)">
						<img :src="item.url" alt="">
					</view>
				</view>
				<view v-if="type == 1" style="margin: 20px 0;">
					<video id="myVideo" :src='video' style="width: 100%;"></video>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	const dbCmd = db.command;
	export default {
		data() {
			return {
				formData: {},
				img: '',
				type: 0,
				imgList: [],
				video: ''
			}
		},
		onLoad(op) {
			this.getDetail(op.id)
		},
		created (op) {},
		mounted (op) {},
		methods: {
			getDetail(id) {
				uni.showLoading({
					mask: true
				})
				db.collection('playback-MGMT').doc(id).field(
					"title,hostTime,location,introduce,annexId,imgList,videoList,deleted_at,created_date,updated_date,created_by").get().then((res) => {
					const data = res.result.data[0]
					if (data) {
						const file = data.annexId.split(',')
						const vfile = data.videoList.split(',')
						this.formData = data
						this.img = `${this.$baseImgUrl}${file[0]}`
						this.video = `${this.$baseImgUrl}${vfile[0]}`
						const arr = data.imgList.split('+')
						for (let i = 0; i < arr.length; i++) {
							const f = arr[i].split(',')
							this.imgList.push({
								n: i,
								url: `${this.$baseImgUrl}${f[0]}`
							})
						}
						console.log(this.imgList)
					}
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},
			previewImage (row) {
				var current = row.url
				const arr = []
				this.imgList.map(img => {
					arr.push(img.url)
				})
				uni.previewImage({
					current: current,
					urls: arr,
					success: (e) => {
						console.log(e, 'success--previewImagepreviewImage')
					},
					fail: (e) => {
						console.log(e, 'fail--previewImagepreviewImage')
					}
				})
			}
		}
	}
</script>

<style>
	.play-back-detail-page {
	}
	.tab-sty {
		width: 130rpx;
		height: 22px;
		color: #ccc;
		font-size: 28rpx;
		display: inline-block;
		padding: 20rpx 10rpx;
		text-align: center;
	}
	.isClick {
		background-color: #f8e9d6;
		color: #ffa52d;
		border-radius: 50rpx;
	}
	.img-area-sty {
		width: 48%;display: inline-block;margin: 0 1%;
	}
	.img-area-sty img {
		width: 100%;height: 130px;border-radius: 5px;
	}
	.text-title {
		font-size: 15px;
		font-family: 600;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
<style lang="scss">
</style>